<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
        body{
            background-image: url("../CSS小组作业image/背景图.webp");
            background-repeat: no-repeat;
            background-size: cover;
        }
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1000px;
            height: 600px;
            border: 10px dotted red;
            background-color: chartreuse;
            margin: 100px auto;
            position: relative;
        }

        .square {
            
            width: 50px;
            position: absolute;
            height: 50px;
            
            display: block;
        }

        .Scolor {
            background-image: url("../CSS小组作业image/贪吃蛇头.webp");
            border-radius: 50%;
            background-repeat: no-repeat;
            background-size: cover;
           
        }

        .Bcolor {
            border-radius: 50%;
            background-image: url("../CSS小组作业image/可行否.gif");
            background-repeat: no-repeat;
            background-size: cover;
        }


        .food {
        
            background-image: url("../CSS小组作业image/继续.gif");
            background-repeat: no-repeat;
            background-size: cover;
            width: 50px;
            height: 50px;
            position: absolute;



        }
        .starting{
            position: absolute;
            left: 10px;
            top: 10px;
            display: flex;
            height: 80px;
        }
        .starting .btn{
            width: 200px;
            outline: 0;
            border: 10px greenyellow solid;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
            background-color: yellow;
            font-weight: 700;
            font-size: 20px;
        }
        .starting .text{
            width: 100px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            font-weight: 700;
        }
        #mode{
            width: 200px;
            height: 80px;
            border: 10px solid red;
            outline: 0;
            border-radius: 12px;
            background-color: blue;
            color: white;
            font-size: 30px;
            font-weight: 700;
        }
        .mode{
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 50px;
        }
        .rule{
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 50px;
            color: red;
            font-weight: 700;
            font-size: 30px;
        }
        
    </style>

</head>

<body>
    <div class="starting">
        <div class="text">分数：</div><div class="btn"></div>
        <div class="mode">
           <div class="text">模式：</div>
            <select name="choose" id="mode">
                <option value="500">慢速</option>
                <option value="200">中速</option>
                <option value="100">快速</option>
            </select>
        </div>
        <div class="rule"><div class="text">规则：</div>点击任意方向键开始</div>
    </div>
    <div class="box">
       
    </div>

    <script>
        //确定方向
        var direction;
        //设置食物类
        
        var box = document.querySelector(".box")
       
        class new_Food {
            constructor(box) {
                this.box = box
                this.pos()
            }
            pos(){
                this.x = Math.floor(Math.random()*19+1)*50;
                this.y = Math.floor(Math.random()*11+1)*50;

            }
            creFood() {
                this.food = document.createElement("div")
                this.food.classList.add("food")
                this.food.style.left = this.x +"px"
                this.food.style.top = this.y +"px"
                this.box.appendChild(this.food)
            }
            Delete_food(){
                this.food = null
                this.pos()
                this.creFood()
               
               
            }

        }
        var new_food = new new_Food(box)
        new_food.creFood()
        //设置默认位置
        var x = 0
        var y = 0
        //根据位置，添加方块,添加蛇头
        function cre() {
            var box = document.querySelector(".box")
            let square = document.createElement("div")
            square.classList.add("square");
            square.classList.add("Scolor")
            square.style.left = x + "px"
            square.style.top = y + "px"
            box.appendChild(square)
        }
      
       
        //控制头的位置
        function Left() {
            x -= 50
        }
        function Right() {
            x += 50
        }
        function Up() {
            y -= 50
        }
        function Down() {
            y += 50
        }
        //改变所有方块的颜色
        function change() {
            let i = 0
            let square = document.getElementsByClassName("square")
            for (i; i < square.length; i++) {
                square[i].classList.remove("Scolor");
                square[i].classList.add("Bcolor");
            }
        }
        //删除尾部方块
        function remove_end() {
            var box = document.querySelector(".box")

            let i = 0;
            let square = document.getElementsByClassName("square");
            box.removeChild(square[0])
        }
        //初始化蛇
        for (var j = 0; j < 3; j++) {
            Right()
            change()
            cre()
        }
        //吃到东西，根据方向，在头的前面加一节
        function add_end() {
            let square = document.getElementsByClassName("square");
            var food = document.querySelector(".food")

            if (parseInt(square[square.length - 1].style.left) == parseInt(food.style.left) && parseInt(square[square.length - 1].style.top) == parseInt(food.style.top)) {
                switch (direction) {
                    case "left":

                        Left()
                        change()
                        cre()
                        break;
                    case "right":
                        Right()
                        change()
                        cre()
                        break;
                    case "up":
                        Up()
                        change()
                        cre()
                        break;
                    case "down":
                        Down()
                        change()
                        cre()
                        break;

                }
            }
        }
       
        //控制运动
        document.addEventListener("keydown", (e) => {
            event.preventDefault();
            switch (e.key) {
                case "ArrowLeft":
                    direction = "left"
                    Left()
                    change()
                    remove_end()
                    cre()
                    start()
                    
                   
                   

                    break;
                case "ArrowRight":
                    direction = "right"
                    Right()
                    change()
                    remove_end()
                    cre()
                    start()
                  
                    
                   


                    break;
                case "ArrowUp":
                    direction = "up"
                    Up()
                    change()
                    remove_end()
                    cre()
                    start()
                 
                   
                    break;
                case "ArrowDown":
                    direction = "down"
                    Down()
                    change()
                    remove_end()
                    cre()
                    start()
                    
                    
                    
                    break;
            }
        })
        // function FoodYes(){
        //     var box = document.querySelector(".box")
        //     var Food = document.createElement("div")
        //     Food.classList.add("food")
        //     Food_x = Math.floor(Math.random()*20)*50
        //     Food_y = Math.floor(Math.random()*12)*50
        //     Food.style.left = Food_x +"px"
        //     Food.style.top = Food_y +"px"
        //     box.appendChild(Food)
        // }
        //吃到食物，自动刷新食物
        function start(){
            var square = document.getElementsByClassName("square")
            
           
                if(new_food.x===square[square.length-1].offsetLeft&&new_food.y===square[square.length-1].offsetTop){
                add_end()
                food_List = document.querySelector(".food")
                food_List.classList.remove("food")
                new_food.Delete_food()

                }
        }
        //自动运动
        function autonomy() {
            var mode = document.getElementById("mode")
            
            switch (direction) {
                case "left":

                    Left()
                    change()
                    remove_end()
                    cre()
                    start()
                  
                    
                    
                    break;
                case "right":
                    Right()
                    change()
                    remove_end()
                    cre()
                    start()
                    
                    
                   
                    break;
                case "up":
                    Up()
                    change()
                    remove_end()
                    cre()
                    start()
                    
                    
                    
                    break;
                case "down":
                    Down()
                    change()
                    remove_end()
                    cre()
                    start()
                  
                    
                    
                    break;
            }
            
            var square = document.getElementsByClassName("square")
            var btn = document.querySelector(".btn")
            var score = square.length
            btn.innerHTML = score *126

            if (parseInt(square[square.length - 1].style.left) < 0 || parseInt(square[square.length - 1].style.left) >= 1000 || parseInt(square[square.length - 1].style.top) < 0 || parseInt(square[square.length - 1].style.top) >= 600) {
                
                location.assign(location.href)
                alert("撞墙了")
            }

            setTimeout(() => { autonomy() }, mode.value)
        }
        //执行
        autonomy()
    </script>
</body>

</html>